<template>
  <el-dialog
    v-model="visible"
    title="入库异常数据"
    width="1160"
    align-center
    :show-close="true"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clickClose"
  >
    <div class="procure-error">
      <!-- 异常数据表格 -->
      <el-table class="jzt-table" :data="list" stripe height="500" style="width: 100%">
        <el-table-column fixed prop="date" show-overflow-tooltip label="商品信息" width="405">
          <template #default="scope">
            <div class="info">
              <div class="left">
                <img src="" alt="" />
              </div>
              <div class="right">
                <h3 class="name">xxxxx浙江义乌新款墙饰</h3>
                <p style="white-space: break-spaces">1200*600*420 胡桃色+深灰色 板木结合+五金架子</p>
                <p>SKU编码：SKU25846846</p>
                <p>ID:598595310</p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="name" show-overflow-tooltip label="数量" />
        <el-table-column prop="address" show-overflow-tooltip label="预计入库件数" width="120" />
        <el-table-column prop="address" show-overflow-tooltip label="单位" />
        <el-table-column prop="address" show-overflow-tooltip label="实际入库数量" width="120" />
        <el-table-column prop="address" show-overflow-tooltip label="史记入库件数" width="120" />
        <el-table-column prop="address" show-overflow-tooltip label="剩余入库件数" width="120">
          <template #default="scope">
            <p style="color: #ff3333">1</p>
          </template>
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="异常处理" width="120">
          <template #default="scope">
            <el-select v-model="scope.row.error" placeholder="请选择">
              <el-option label="漏发待补发" value="1" />
              <el-option label="改版" value="2" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="异常处理备注" width="120">
          <template #default="scope">
            <el-input type="textarea" :rows="2" v-model="scope.row.tips"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="address" show-overflow-tooltip label="备注" width="200">
          <template #default> 备注内容显示备注内容显示备注内容显示备注内容显示备注内容显示 </template>
        </el-table-column>
      </el-table>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" plain @click="clickClose">取消</el-button>
        <el-button type="primary">保存修改</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from "vue";
import { ElMessage } from "element-plus";

const visible = ref(false);
const list = ref([{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}]);

const emit = defineEmits(["close"]);
const props = defineProps({
  optionInfo: {
    type: Object,
    default: () => {
      return {
        isShow: false
      };
    }
  }
});
watch(
  () => props.optionInfo.isShow,
  async val => {
    visible.value = val;
  },
  { deep: true }
);

onMounted(async () => {});

const clickClose = () => {
  emit("close");
};
</script>

<style lang="scss" scoped>
.info {
  display: flex;
  .left {
    img {
      width: 80px;
      height: 80px;
      border-radius: 4px;
    }
  }
  .right {
    padding-left: 18px;
    .name {
      font-size: 14px;
      color: #3d3d3d;
      margin-bottom: 5px;
    }
    p {
      font-size: 12px;
      color: #86909c;
      margin-bottom: 5px;
    }
  }
}
</style>
